import React, { useCallback, useImperativeHandle, useState } from "react";
import { Card, Avatar, Row, Col, Switch, Popconfirm, Button } from "antd";
import { EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';

const { Meta } = Card;

function ComponentCard(props, ref) {

    const [data, setData] = useState(props.data);

    let currentData = {
        ...data,
        state: { ...data.state },
        configuration: { ...data.configuration },
        typeObject: { ...data.typeObject },
    };

    useImperativeHandle(
        ref,
        () => ({
            getCurrentData() {
                return currentData;
            },
        }),
        [currentData],
    )

    const handlePopconfirmClick = useCallback(() => {
        currentData = {
            ...data,
            state: {
                ...data.state,
                value: data.state.value === 'enabled' ? 'disabled' : 'enabled',
                text: data.state.value === 'enabled' ? '已停止' : '已启动'
            }
        };
        props.handleDataChange();
        setData(currentData);
    }, [data]);

    // const handleDelete = useCallback(() => {

    // }, [])

    // const handleNewComponentItem = useCallback(() => {
    //     ;
    // }, [])

    return <div>
        {Object.keys(data) <= 0 ?
            <Card key='addComponent' hoverable={true}>
                <Button type="dashed" block
                    style={{ height: '120px', color: '#aaa' }} icon={<PlusOutlined key='add' />}
                    onClick={() => props.handleNewComponentItem()}>
                    新增组件
                </Button>
            </Card>
            :
            <Card
                hoverable={true}
                actions={[
                    <EditOutlined key="edit" onClick={() => {
                        props.handleEdit(data);
                    }} />,
                    <Popconfirm
                        placement='top'
                        title='确定删除此组件吗?'
                        onConfirm={()=> {props.handleDelete(data.id)}}
                        okText='确定'
                        cancelText='取消'>
                        <CloseOutlined key="close" />
                    </Popconfirm>
                ]}>
                <Meta
                    avatar={<Avatar size="small" />}
                    title={data.name}
                    description={
                        <Row span={24} justify="center">
                            <Col span={12}>
                                <Row justify="center">组件类型</Row>
                                <Row justify="center" style={{ color: 'black', marginTop: '5px' }}>{data.type}</Row>
                            </Col>
                            <Col span={12}>
                                <Row justify="center">组件状态</Row>
                                <Row justify="center" style={{ marginTop: '5px' }}>
                                    <Popconfirm placement="top"
                                        title={`确定${data.state.value === 'enabled' ? '停止' : '启动'}`}
                                        onConfirm={handlePopconfirmClick} okText="确认" cancelText="取消">
                                        <Switch checked={data.state.value === 'enabled'} />
                                    </Popconfirm>
                                </Row>
                            </Col>
                        </Row>
                    }
                />
            </Card>}
    </div>
}

export default ComponentCard
